<template>
    <div class="responsive-layout">
        <div class="kp">
            <div class="responsive-layout">
                <el-card class="box-card">
                    <div class="item">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="退货单号">
                                <el-input v-model="form.buy_code" style="width: 300px;"></el-input>
                                <!-- 假设这里有一个按钮来触发模态框 -->
                                <el-button type="text" @click="linkcha">一键获取</el-button>
                            </el-form-item>
                            <!-- 模态框 -->
                            <el-dialog title="模态框标题" :visible.sync="dialogVisible" width="80%"
                                @close="dialogVisible = false">
                                <!-- 模态框内容 -->
                                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                    <el-form-item label="进货订单">
                                        <el-input style="width: 130px;" v-model="formInline.user"
                                            placeholder="审批人"></el-input>
                                    </el-form-item>
                                    <el-form-item label="单据状态">
                                        <el-select style="width: 130px;" v-model="formInline.region" placeholder="状态">
                                            <el-option label="草稿" value="1"></el-option>
                                            <el-option label="待审核" value="2"></el-option>
                                            <el-option label="驳回" value="3"></el-option>
                                            <el-option label="未入库" value="4"></el-option>
                                            <el-option label="部分入库" value="5"></el-option>
                                            <el-option label="已完成" value="6"></el-option>
                                            <el-option label="已关闭" value="7"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="供应商">
                                        <el-select v-model="formInline.GYS" clearable placeholder="请选择"
                                            :style="{ width: '200px' }">
                                            <el-option v-for="item in GYSdate" :key="item.supply_code"
                                                :label="item.supply_name" :value="item.supply_name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>




                                    <el-form-item label="进货日期">
                                        <el-date-picker style="width: 280px;" v-model="value1" type="daterange" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="Qing()">重置</el-button>
                                        <el-button type="success" @click="Tiaojian()">查询</el-button>
                                    </el-form-item>

                                </el-form>
                                <div><!-- 表单数据-->
                                    <el-table :data="Adate" ref="AdateMZ" border style="width: 100%"
                                        @selection-change="handleSelectionChange">
                                        <el-table-column fixed type="selection" width="55">
                                        </el-table-column>
                                        <el-table-column fixed width="50" prop="id">
                                            <!-- 自定义表头 -->
                                            <template slot="header">
                                                <div class="container">
                                                    <i @click="cz()" class="el-icon-setting" />
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column v-if="xs.buy_code" fixed prop="buy_code" label="进货单号"
                                            width="180">
                                            <template slot-scope="scope">
                                                <router-link
                                                    :to="{ path: '/JHXiangQing', query: { buy_code: scope.row.buy_code } }">
                                                    <a class="link">{{ scope.row.buy_code }}</a>
                                                </router-link>
                                            </template>
                                        </el-table-column>
                                        <el-table-column v-if="xs.sure_state" fixed prop="sure_state" label="单据状态"
                                            width="80">
                                            <template slot-scope="scope">
                                                <div v-if="scope.row.sure_state === '1'">草稿</div>
                                                <div v-else-if="scope.row.sure_state === '2'">待审核</div>
                                                <div v-else-if="scope.row.sure_state === '3'">驳回</div>
                                                <div v-else-if="scope.row.sure_state === '4'">未入库</div>
                                                <div v-else-if="scope.row.sure_state === '5'">部分入库</div>
                                                <div v-else-if="scope.row.sure_state === '6'">已完成 </div>
                                                <div v-else-if="scope.row.sure_state === '7'">已关闭</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column v-if="xs.buy_date" fixed prop="buy_date" label="进货日期"
                                            width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.supply_name" prop="supply_name" label="供应商"
                                            width="80">
                                        </el-table-column>
                                        <el-table-column v-if="xs.link_man" prop="link_man" label="联系人" width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.link_way" prop="link_way" label="联系方式" width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.buy_man" prop="buy_man" label="进货人" width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.sl" prop="sl" label="货品数量" width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.zjg" prop="zjg" label="货品金额" width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.item_names" prop="item_names" label="销售货品"
                                            width="120">
                                            <template slot-scope="scope">
                                                {{ formatItemNames(scope.row.item_names) }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column v-if="xs.create_by" prop="create_by" label="制单人" width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.create_time" prop="create_time" label="制单时间"
                                            width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.sure_man" prop="sure_man" label="审核人" width="120">
                                        </el-table-column>
                                        <el-table-column v-if="xs.sure_date" prop="sure_date" label="审核时间" width="120">
                                        </el-table-column>
                                        <el-table-column fixed="right" label="操作" width="100">
                                            <template slot-scope="scope">
                                                <el-button v-if="scope.row.sure_state === '1'"
                                                    @click="bianJi(scope.row)" type="text" size="small">编辑</el-button>
                                                <el-button v-if="scope.row.sure_state === '2'"
                                                    @click="bianJi(scope.row)" type="text" size="small">编辑</el-button>
                                                <el-button v-if="scope.row.sure_state === '1'"
                                                    @click="shanChu(scope.row)" type="text" size="small">删除</el-button>
                                                <el-button v-if="scope.row.sure_state === '2'"
                                                    @click="shanChu(scope.row)" type="text" size="small">删除</el-button>
                                                <el-button v-if="scope.row.sure_state === '3'"
                                                    @click="cheXiao(scope.row)" type="text" size="small">撤销</el-button>
                                                <el-button v-if="scope.row.sure_state === '4'"
                                                    @click="cheXiao(scope.row)" type="text" size="small">撤销</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- 分页 -->
                                    <div class="block">
                                        <el-pagination @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange" :current-page="this.dqy"
                                            :page-sizes="[4, 8, 12, 16, 20]" :page-size="this.mys"
                                            layout="total, sizes, prev, pager, next, jumper" :total="this.zts">
                                        </el-pagination>
                                    </div>
                                </div>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="ZH">确 定</el-button>
                                </span>
                            </el-dialog>
                            <el-form-item label="退货日期">
                                <el-col :span="11">
                                    <el-date-picker v-model="form.buy_date" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-col>


                            </el-form-item>
                            <el-form-item label="供应商">
                                <el-input v-model="form.supply_name" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人">
                                <el-input v-model="form.link_man" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="进货人">
                                <el-input v-model="form.buy_man" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item>

                            </el-form-item>
                        </el-form>


                    </div>
                </el-card>
                <el-card class="box-card">
                    <p>退货明细</p>
                    <button type="button" class="btn btn-success" @click="oderbuy_d">添加</button>
                    <button type="button" class="btn btn-primary">删除</button>
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="item_name" label="货品名称" width="180">
                        </el-table-column>
                        <el-table-column prop="item_code" label="货品名编号" width="180">
                        </el-table-column>
                        <el-table-column prop="model_code" label="规格编号">
                        </el-table-column>
                        <el-table-column prop="unit" label="单位">
                        </el-table-column>
                        <el-table-column prop="item_type" label="入库类型">
                        </el-table-column>
                        <el-table-column prop="buy_num" label="进货数量">
                        </el-table-column>
                        <el-table-column label="退货数量">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.she" placeholder="请输入退货数量"
                                    style="width: 150px;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.bz" placeholder="请输入备注" style="width: 150px;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="inbill_num" label="已入库数量">
                        </el-table-column>
                    </el-table>
                    <el-dialog title="增加货品明细" :visible.sync="dialogVisible2" width="80%"
                        @close="dialogVisible2 = false">
                        <el-table :data="tableData2" stripe style="width: 100%"
                            @selection-change="handleSelectionChange2">
                            <el-table-column fixed type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="item_name" label="货品名称" width="180">
                            </el-table-column>
                            <el-table-column prop="item_code" label="货品名编号" width="180">
                            </el-table-column>
                            <el-table-column prop="model_code" label="规格编号">
                            </el-table-column>
                            <el-table-column prop="unit" label="单位">
                            </el-table-column>
                            <el-table-column prop="item_type" label="入库类型">
                            </el-table-column>
                            <el-table-column prop="buy_num" label="进货数量">
                            </el-table-column>
                            <el-table-column prop="inbill_num" label="已入库数量">
                            </el-table-column>

                        </el-table>
                        <button type="button" class="btn btn-success" @click="oderbuy_H">确定</button>
                        <button type="button" class="btn btn-primary">取消</button>
                    </el-dialog>
                    <div style="float: right;">
                        <button type="button" class="btn btn-info" @click="oderbuy_ZJ">加入</button>
                
            </div>
                </el-card>
              
                 
              
            </div>
        </div>
        <!--审核弹框-->
        <el-dialog :inline="true" title="审核" :visible.sync="kuang" width="30%">
            <el-form ref="form" label-width="80px">
                <el-form-item label="审核状态">
                    <el-radio-group v-model="ShenHezt">
                        <el-radio label="4">通过</el-radio>
                        <el-radio label="3">驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审核意见">
                    <el-input style="width: 280px;" type="textarea" v-model="ShenHeyj"></el-input>
                </el-form-item>
            </el-form>



            <span slot="footer" class="dialog-footer">
                <el-button @click="kuang = false">取 消</el-button>
                <el-button type="primary" @click="shenHe()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
      
</template>
<script>
import moment from 'moment';
import $http from '@/http/base.js';
export default {
    data() {
        return {
            tableData: [],
            tableData2: [],
            tableData3: [],
            selectedRows: [],
            Adate: [],
            formInline: {
                region: '\0',
                GYS: '',
                user: '',
            },
            //时间控件转换格式
            value1: [],
            qsj: '',
            hsj: '',
            mys: 4,
            dqy: 1,
            zts: 0,
            GYSdate: [],
            dialogVisible2: false,
            whom_h:
            {
                buy_code: '',
                sale_state: '',
                sr_date: '',
                supply_code: '',
                link_man: '',
                link_way: '',
                buy_man: '',
                returms_num: '',
                returms_mon: '',
                buy_price: '',
                remark: '',
                create_by: '',
                create_time: '',
                update_time: '',
                update_by: '',
                sure_state: '',
                sure_man: '',
                sure_date: ''
            },
            xs: {
                sure_date: true,
                sure_man: true,
                create_time: true,
                create_by: true,
                item_names: true,
                zjg: true,
                sl: true,
                buy_man: true,
                link_way: true,
                link_man: true,
                supply_name: true,
                buy_date: true,
                sure_state: true,
                buy_code: true
            },
            Idbh: [],//存储批量编号
            Ztzd: [],//储存批量状态
            kuang: false,//默认关闭弹框
            ShenHezt: '',
            ShenHeyj: '',
            ShenHeman: '',
            ShenHesj: '',
            loading: true//刷新加载
            ,
            form: {
                buy_code: "",
                buy_date: "",
                supply_name: "",
                link_man: '',
                buy_man: '',


            },
            options: [
            ],
            dialogVisible: false
        }
    },
    methods: {
        oderbuy_ZJ()
        {

        },
        addwhom_h() {
            // 将whom_h对象转换为JSON字符串
            var jsonData = JSON.stringify(this.whom_h);
            //然后再进行添加
            $http
                .post('api/whom_suppy_h/addwhom_h', jsonData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(res => {
                    console.log(res);
                })
                .catch(err => {
                    alert('添加失败');
                    console.error(err);
                });
        },
        handleSelectionChange2(res) {
            this.tableData3 = res;
        },
        oderbuy_H() {
            this.dialogVisible2 = false;
            this.tableData = this.tableData3;

        },
        handleSelectionChange(selectedRows) {
            // `selectedRows` 是一个数组，包含了当前选中的所有行数据
            this.selectedRows = selectedRows;
            console.log("Selected rows:", this.selectedRows);
        },
        oderbuy_d() {
            this.dialogVisible2 = true;
            $http
                .get('api/whom_suppy_h/regret?buy_code=' + this.form.buy_code)
                .then(res => {
                    this.tableData2 = res;


                })
                .catch(err => {
                    alert('查询失败'),
                        console.log(err);
                })

        },
        ZH() {
            this.dialogVisible = false;
            this.form.buy_code = this.selectedRows[0].buy_code
            this.form.buy_date = this.selectedRows[0].buy_date
            this.form.supply_name = this.selectedRows[0].supply_name
            this.form.link_man = this.selectedRows[0].link_man
            this.form.buy_man = this.selectedRows[0].buy_man
            console.log("在这里" + this.form.buy_code)

        },
        onSubmit() {
            console.log('submit!');
        },
        FenYecha() {
            $http
                .get('api/WHOM_Select/WHOMWhereSelect?mys=' + this.mys + '&dqy=' + this.dqy + '&qsj=' + this.qsj + '&hsj=' + this.hsj + '&buy_code=' + this.formInline.user + '&sure_state=' + this.formInline.region + '&supply_name=' + this.formInline.GYS)
                .then(res => {
                    this.Adate = res.list;
                    this.zts = res.zts;
                    console.log(res);
                })
                .catch(err => {
                    alert('查询失败'),
                        console.log(err);
                })
        },
        //分页查询
        FenYecha() {
            $http
                .get('api/WHOM_Select/WHOMWhereSelect?mys=' + this.mys + '&dqy=' + this.dqy + '&qsj=' + this.qsj + '&hsj=' + this.hsj + '&buy_code=' + this.formInline.user + '&sure_state=' + this.formInline.region + '&supply_name=' + this.formInline.GYS)
                .then(res => {
                    this.Adate = res.list;
                    this.zts = res.zts;
                    console.log(res);
                })
                .catch(err => {
                    alert('查询失败'),
                        console.log(err);
                })
        },
        //批量删除
        Delete() {
            this.Huoqvxinxi();
            const hasThreeOrFour = this.Ztzd.every(item => item === '1' || item === '2');
            if (!hasThreeOrFour) {
                this.$message({
                    message: '删除失败,状态不符',
                    type: 'warning'
                });
            } else {
                this.$confirm('确定删除这些数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $http
                        .put('api/WHOM_Select/WHOMDelete', this.Idbh)
                        .then(res => {
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            });
                            this.FenYecha();
                            this.drawer = false;
                        })
                        .catch(err => {
                            this.$message.error('删除失败');
                            console.log(err);
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        //审核弹窗
        ShenHeTankuang() {
            this.dangqianTime();
            this.Huoqvxinxi();
            if (this.Idbh == "" && this.Ztzd == "") {
                this.$message({
                    message: '我靠!你都没选就想审核',
                    type: 'warning'
                });
            } else {
                const zhuangtpanduan = this.Ztzd.every(item => item === '2');
                if (!zhuangtpanduan) {
                    this.$message({
                        message: '审核失败,状态不符',
                        type: 'warning'
                    });
                } else {
                    this.ShenHe();
                }
            }
        },
        //批量审核
        ShenHe() {
            this.kuang = true
            $http
                .put('api/WHOM_Select/SHUpdate?states=' + this.ShenHezt + '&sureman=' + this.ShenHeman + '&suredate=' + this.ShenHesj + '&remack' + this.ShenHeyj + '', this.Idbh)
                .then(res => {
                    this.$message({
                        message: '审核成功!',
                        type: 'success'
                    })
                    this.FenYecha();
                    this.drawer = false
                    this.kuang = false
                })
                .catch(err => {
                    this.$message.error({
                        message: "审核失败"
                    })
                    console.log(err);
                })
        },
        //批量撤销
        CheXioa() {
            this.Huoqvxinxi()
            const zhuangtaipanduan = this.Ztzd.every(item => item === '3' || item === '4');
            if (!zhuangtaipanduan) {
                this.$message({
                    message: '撤销失败,状态不符',
                    type: 'warning'
                });
            } else {
                this.$confirm('确定撤销这些数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $http
                        .put('api/WHOM_Select/CXUpdate', this.Idbh)
                        .then(res => {
                            this.$message({
                                message: '撤销成功!',
                                type: 'success'
                            });
                            this.FenYecha();
                            this.drawer = false;
                        })
                        .catch(err => {
                            this.$message.error('撤销失败');
                            console.log(err);
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消对数据的撤销'
                    });
                });
            }
        },
        //刷新
        ShuaXin() {
            this.loading = true
            this.QingKong();
            this.FenYecha();
            setTimeout(() => {
                this.loading = false;
            }, 2000);
        },
        //清空
        QingKong() {
            this.formInline.region = '\0',
                this.formInline.GYS = '',
                this.formInline.user = '',
                this.qsj = '',
                this.hsj = ''
        },
        Tiaojian() {
            this.FenYecha();
        },
        //获取多选中的编号,状态
        Huoqvxinxi() {
            this.Idbh = [];//存储序号(id)
            this.Ztzd = [];//存储状态
            const selectedRows = this.$refs.AdateMZ.selection; // 获取选中的行数据
            const data = selectedRows.map(row => { return { '序号': row.id }; });//获取序号
            const data2 = selectedRows.map(row => { return { '状态': row.sure_state }; });//获取状态

            for (let i = 0; i < data.length; i++) {
                this.Idbh.push(data[i]['序号']);
            }
            for (let i = 0; i < data2.length; i++) {
                this.Ztzd.push(data2[i]['状态']);
            }
            console.log('序号：' + this.Idbh);
            console.log('状态：' + this.Ztzd);
        },
        //条数改变
        handleSizeChange(val) {
            this.mys = val;
            this.cha();
        },
        //页数改变
        handleCurrentChange(val) {
            this.dqy = val;
            this.cha();
        },
        //打开模态框
        linkcha() {
            this.dialogVisible = true;
            this.FenYecha();
        },
        //字段处理
        formatItemNames(itemNames) {
            if (itemNames && itemNames.length > 5) {
                return itemNames.slice(0, 5) + "...";
            } else if (itemNames) {
                return itemNames;
            } else {
                return "";
            }
        },
        //当前时间获取 年月日
        dangqianTime() {
            const date = new Date();
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);

            this.currenTime = `${year}-${month}-${day}`;
            this.ShenHesj = this.currenTime
        },
        XinZeng() {
            this.$router.push('/InventoryManagementadd');
        }
    },
    mounted() {

        this.formatItemNames()
        this.ShuaXin()
    },

}
</script>

<style scoped></style>